<template>
  <Card v-bind="$attrs">
    <div class="text-center">
      <CropperAvatar
        :uploadApi="uploadApi"
        :value="avatar"
        btnText="更换头像"
        :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
        @change="updateAvatar"
        width="150"
      />
    </div>
    <ul class="list-group list-group-striped">
      <li class="list-group-item">
        <Icon icon="icon-park-outline:id-card-h" class="mr-1" />
        编号
        <div class="pull-right">{{ userinfo.userCode }}</div>
      </li>
      <li class="list-group-item">
        <Icon icon="ant-design:user-outlined" class="mr-1" />
        姓名
        <div class="pull-right">{{ userinfo.userName }}</div>
      </li>
      <li class="list-group-item">
        <Icon icon="maki:college" class="mr-1" />
        学院
        <div class="pull-right">{{ userinfo.college.collegeName }}</div>
      </li>
    </ul>
    <a-button @click="handleClick" block>学院信息</a-button>
  </Card>
  <CollegeDesc @register="registerModal" />
</template>

<script lang="ts" setup>
  import { computed } from "vue";
  import { Card } from "ant-design-vue";
  import CollegeDesc from "./CollegeDesc.vue";
  import Icon from "/@/components/Icon/index";
  import { uploadApi } from "/@/api/sys/upload";
  import headerImg from "/@/assets/images/header.jpg";
  import { useUserStore } from "/@/store/modules/user";
  import { CropperAvatar } from "/@/components/Cropper";
  import { useModal } from "/@/components/Modal";

  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);

  const avatar = computed(() => {
    const { avatar } = userStore.getUserInfo;
    return avatar || headerImg;
  });

  function updateAvatar(src: string) {
    const userinfo = userStore.getUserInfo;
    userinfo.avatar = src;
    userStore.setUserInfo(userinfo);
  }

  const [registerModal, { openModal }] = useModal();

  function handleClick() {
    const userinfo = userStore.getUserInfo;
    openModal(true, userinfo.college);
  }
</script>

<style lang="less" scoped>
  .text-center {
    text-align: center;
  }

  .list-group {
    padding-left: 0;
    list-style: none;
  }

  .list-group-item {
    border-bottom: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    margin-bottom: -1px;
    padding: 11px 0;
    font-size: 13px;
  }

  .pull-right {
    float: right !important;
  }

  .list-group-striped {
    .list-group-item {
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
</style>
